<template>
	<view class="report-serve-detail">
		<view class="bg-light report-serve-detail-header flexR">
			<text class="iconfont icon-baogaoguanli_huaban1"></text>
			<text>报告单号：</text>
			<text class="num">{{paras.name||'265323565623233532323'}}</text>
		</view>
		<view class="bg-light sawtooth">
			<image src="../../../static/images/imgs/sawtooth.png" mode="scaleToFill"></image>
		</view>
		<view class="section-box">
			<u-section title="患者信息" :right="false" :bold='false' :line-color='themeColorLight' color="#000000"></u-section>
		</view>
		<view class="row-box u-border-top">
			<view v-for="item in userLabel" :key="item.fKey" class="card-row">
				<label>{{item.label}}</label>{{params[item.key]||'你好'}}
			</view>
		</view>
		<view class="div-cut"></view>
		<view class="section-box">
			<u-section title="报告信息" :right="false" :bold='false' :line-color='themeColorLight' color="#000000"></u-section>
		</view>
		<view class="row-box u-border-top">
			<view v-for="item in reportLabel" :key="item.fKey" class="card-row">
				<label>{{item.label}}</label>{{params[item.key]||'你好'}}
			</view>
		</view>
		<view class="div-cut"></view>
		<view class="report-serve-detail-table">
			<u-table align='center'>
				<u-tr>
					<u-th>名称</u-th>
					<u-th>结果</u-th>
					<u-th v-if="query.jcjybz=='1'">参考范围</u-th>
				</u-tr>
				<u-tr v-for="(item, i) in tableData" :key='i'>
					<u-td>{{ item.xmmc }}</u-td>
					<u-td>{{ (item.xmjg + item.xmdw)||'' }}</u-td>
					<u-td v-if="query.jcjybz=='1'">{{ item.jgckz }}{{ item.xmdw }}</u-td>
				</u-tr>
			</u-table>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import {themeColorLight} from '@/static/js/theme.js'
	import { getCheckExamDetail } from '@/api/home.js'
	import Load from '@/components/Load/index.vue'
	export default {
		components:{ Load },
		data() {
			return {
				themeColorLight,
				load:true,
				query:{},
				params:'',
				tableData:[],
				userLabel:[
					{
						label:'患者姓名：',
						key:'hzxm',
						fKey:'label11'
					},
					{
						label:'患者性别：',
						key:'sex',
						fKey:'label21'
					},
					{
						label:'患者卡号：',
						key:'cardno',
						fKey:'label31'
					},
					{
						label:'病历号：',
						key:'blh',
						fKey:'label41'
					}
				],
				reportLabel:[
					{
						label:'检查科室：',
						key:'jcksmc',
						fKey:'label1'
					},
					{
						label:'报告类别：',
						key:'replbmc',
						fKey:'label2'
					},
					{
						label:'送检日期：',
						key:'sjrq',
						fKey:'label3'
					},
					{
						label:'发布日期：',
						key:'fbrq',
						fKey:'label4'
					}
				],
			}
		},
		onLoad(op) {
			this.query = {
				jcjybz: op.jcjybz||'',
				replb: op.replb||'',
				repno: op.repno||''
			}
			this.initData()
		},
		methods: {
			initData(){
				this.load = true
				getCheckExamDetail(this.query).then(data => {
					this.load = false
					let res = data||[]
					if(res.length){
						this.params = res[0]
						this.tableData = res
					}else{
						this.params = ''
						this.tableData = []
					}
				}).catch(e => {
					this.load = false
					this.params = ''
					this.tableData = []
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.report-serve-detail{
		height: calc(100vh);
		overflow: scroll;
		background-color: $uni-bg-color;
		&-header{
			height: 110rpx;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			font-size: 30rpx;
			
			>.iconfont{
				font-size: 28px;
				margin-right: 10rpx;
			}
			>.num{
				font-weight: bold;
			}
		}
		>.sawtooth{
			margin-bottom: 30rpx;
		}
		.section-box{
			padding: 24rpx 30rpx;
		}
		.row-box{
			padding: 40rpx 30rpx;
		}
	}
</style>
<style lang="scss">
	.report-serve-detail-table{
		padding: 30rpx;
		.u-tr{
			border: 1px solid #f8f8f8;
			border-top: none;
			>view{
				word-wrap:break-word; 
				word-break:break-all;
			}
			.u-td{
				min-height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx;
			}
		}
	}
</style>